<template>
  <div class="mainsu">
    <div class="main_spac1">
      <div class="main_white padding10 paddingBottom20">
        <div class="main_table marginTop10" style="min-height: 550px">
          <div>
            <div>系统应用</div>
            <div class="box">
              <div
                class="app_box"
                v-for="(items, index) in info.system_list"
                :key="index"
                @click="gopage(items, 1)"
              >
                <div class="header" v-if="items.select == 1">
                  <img class="no" src="../../assets/images/three.png" alt="" />
                  <div class="no_txt">免费</div>
                </div>

                <div class="header" v-if="items.select == 2">
                  <img class="yes" src="../../assets/images/one.png" alt="" />
                  <div class="yes_txt">未获得</div>
                </div>

                <div class="header" v-if="items.select == 3">
                  <img class="yes" src="../../assets/images/two.png" alt="" />
                  <div class="yes_txt">已获得</div>
                </div>
                <div class="flex">
                  <img class="icon" :src="items.icon" alt="" />
                  <div class="nickname">{{ items.name }}</div>
                  <div class="name">{{ items.remark }}</div>
                </div>
              </div>
            </div>
          </div>

          <div>
            <div>第三方应用</div>
            <div class="box">
              <div
                class="app_box"
                v-for="(item, indexs) in info.third_party_list"
                :key="indexs"
                @click="gopage(item, 2)"
              >
                <div class="header" v-if="item.select == 1">
                  <img class="no" src="../../assets/images/three.png" alt="" />
                  <div class="no_txt">免费</div>
                </div>

                <div class="header" v-if="item.select == 2">
                  <img class="yes" src="../../assets/images/one.png" alt="" />
                  <div class="yes_txt">未获得</div>
                </div>

                <div class="header" v-if="item.select == 3">
                  <img class="yes" src="../../assets/images/two.png" alt="" />
                  <div class="yes_txt">已获得</div>
                </div>

                <div class="flex">
                  <img class="icon" :src="item.icon" alt="" />
                  <div class="nickname">{{ item.name }}</div>
                  <div class="name">{{ item.remark }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <el-dialog :title="title" :visible.sync="dialogVisible" width="20%">
        <div class="main_container">
          <div id="qrcode"></div>
          <div class="wx_style">打开微信，扫一扫</div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import QRCode from "qrcodejs2";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
import { server_app } from "@/api/currency";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      info: {
        system_list: [],
        third_party_list: [],
        open_type: {}
      },
      dialogVisible: false,
      title: ""
    };
  },
  computed: {
    ...mapGetters(["avatar"])
  },

  created() {
    // 列表
    this.server_app();
  },
  methods: {
    // 列表
    server_app() {
      this.listLoading = true;
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          )
        },
        apiUrl().name
      );
      server_app(data).then(res => {
        if (res.errcode == 0) {
          this.info = res.data;
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    gopage(val, type) {
      if (type == 1) {
        if (val.select == 2) {
          this.toast();
        }
        //免费或者已获得
        if (val.select == 1 || val.select == 3) {
          this.openwindow(val);
        }
      } else {
        if (val.select == 2) {
          this.toast();
        }
        if (val.select == 1 || val.select == 3) {
          this.openwindow(val);
        }
      }
    },
    //强提醒
    toast() {
      this.$confirm("该应用未获得，请联系业务经理开通，谢谢！", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {})
        .catch(() => {});
    },
    //跳转页面
    openwindow(val) {
      if (val.open_type == 1) {
        window.open(val.url, "_self");
      }
      if (val.open_type == 2) {
        window.open(val.url, "_blank");
      }
      if (val.open_type == 3) {
        this.dialogVisible = true;
        this.title = val.name;
        if (document.querySelector("#qrcode")) {
          document.querySelector("#qrcode").innerHTML = "";
        }
        this.$nextTick(() => {
          let qrcode = new QRCode("qrcode", {
            width: 150,
            height: 150,
            text: val.url
          });
        });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";
.box {
  margin: 15px 0px;
  display: flex;
}
.app_box {
  border: 1px solid #ccc;
  width: 200px;
  position: relative;
  height: 120px;
  margin-right: 15px;
  cursor: pointer;
}
.flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.nickname {
  padding: 5px 0px;
}
.name {
  color: #666;
}
.icon {
  width: 15%;
}
.header {
  position: absolute;
  left: 0;
  top: 0;
}

.yes {
  height: auto;
  padding: 5px;
}
.no_txt {
  position: absolute;
  top: 5px;
  left: 5px;
  color: white;
  font-size: 14px;
}
.yes_txt {
  position: absolute;
  top: 9px;
  left: 13px;
  color: white;
  font-size: 14px;
  width: 10px;
}
#qrcode {
  width: 150px;
  height: 150px;
  margin: 0 auto;
}
.main_container {
  height: 260px;
  display: flex;
  align-items: center;
  // justify-content: center;
  flex-direction: column;
  margin-top: 20px;
}

.wx_style {
  background-color: #4fa388;
  color: white;
  padding: 6px 15px;
  border-radius: 20px;
  margin-top: 20px;
  font-size: 14px;
}

/deep/.el-dialog__header {
  border-bottom: 1px solid #e6e6e6;
  padding: 10px 20px 10px 20px;
}
/deep/.el-dialog__headerbtn {
  top: 13px;
}
</style>
